<template>
  <div>
    <el-form :model="eventForm" :rules="eventFormRoles" ref="eventForm" label-width="10em">
      <h-box header="活动基本信息">
        <el-form-item label="活动标题" prop="title">
          <el-input v-model="eventForm.title" placeholder="请输入活动标题，最多 16 个字" style="width: 400px;"></el-input>
          <div class="hui-color-text-secondary hui-font-size-small">活动标题不对消费者展示，仅供管理员备注用</div>
        </el-form-item>
        <el-form-item label="给用户打标签" prop="userTags">
          <hpro-select-tags v-model="eventForm.userTags" @change="onChangeUserTags" style="width: 400px;"></hpro-select-tags>
          <div class="hui-color-text-secondary hui-font-size-small">
            <span>给参加过活动的用户打标签，美味建议商户以标签管理参加过活动的用户。</span>
            <router-link to="/home/user/tags/list" target="_blank">新建标签</router-link>
          </div>
        </el-form-item>
        <el-form-item label="活动时间" prop="_dateRange">
          <el-date-picker @change="onChangeDateRange" v-model="eventForm._dateRange" :picker-options="pickerOptions" :default-time="['00:00:00', '23:59:59']" type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" value-format="timestamp" align="center"></el-date-picker>
        </el-form-item>
      </h-box>
      <h-box header="活动规则">
        <el-form-item label="生效日期限制" prop="eventAllWeekly">
          <el-radio-group v-model="eventForm.eventAllWeekly" @change="onChangeCanEventWeekly">
            <el-radio :label="true">所有日期</el-radio>
            <el-radio :label="false">一周内的某些天</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可生效日期" prop="canEventWeekly" v-if="!eventForm.eventAllWeekly">
          <el-checkbox-group @change="onChangeWeeklySort" v-model="eventForm.canEventWeekly">
            <el-checkbox :label="item.label" name="canEventWeekly" v-for="item in weeklyRoles" :key="item.label">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
          <div class="hui-color-text-secondary hui-font-size-small">示例：您可设置仅限 周一 至 周五 生效。如想每天都生效，全选即可</div>
        </el-form-item>
        <el-form-item label="生效时段限制" prop="eventAllDaily">
          <el-radio-group v-model="eventForm.eventAllDaily" @change="onChangeCanEventDaily">
            <el-radio :label="true">所有时段</el-radio>
            <el-radio :label="false">一天内的某些时段</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可生效时段" prop="canEventDaily" v-if="!eventForm.eventAllDaily">
          <el-select @change="onChangeDailySort" v-model="eventForm.canEventDaily" multiple filterable default-first-option placeholder="请选择生效时段" style="width: 400px;">
            <el-option v-for="item in dailyRoles" :key="item.key" :label="item.label" :value="item.key"></el-option>
          </el-select>
          <div class="hui-color-text-secondary hui-font-size-small">示例：您可设置仅限 11点 至 13点 生效，生效时段范围为 <b>大于等于 11:00</b>，<b>小于 13:00</b>。如想所有时段都生效，全选即可</div>
        </el-form-item>
        <el-form-item label="折扣力度" prop="discount">
          <el-input v-model.number="eventForm.discount" :maxlength="2" placeholder="10 - 99" style="width: 240px;">
            <template slot="prepend">打</template>
            <el-button slot="append">折</el-button>
          </el-input>
          <div class="hui-color-text-secondary hui-font-size-small">填60，就是打6折；填80，就是打8折。最小10，最大99</div>
        </el-form-item>
      </h-box>
      <h-box header="活动参与限制">
        <el-form-item label="参加用户限制" prop="eventAllUser">
          <el-radio-group v-model="eventForm.eventAllUser" @change="onChangeCanEventUser">
            <el-radio :label="true">所有用户都可参加</el-radio>
            <el-radio :label="false">部分用户可参加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可参加用户" prop="canEventUser" v-if="!eventForm.eventAllUser">
          <hpro-checkbox-card v-model="eventForm.canEventUser" @change="onUserChange"></hpro-checkbox-card>
        </el-form-item>
        <el-form-item label="活动门店限制" prop="eventAllBranch">
          <el-radio-group v-model="eventForm.eventAllBranch" @change="onChangeCanEventBranch">
            <el-radio :label="true">所有门店参加</el-radio>
            <el-radio :label="false">部分门店参加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="参加活动门店" prop="canEventBranch" v-if="!eventForm.eventAllBranch">
          <el-table :data="eventForm.canEventBranch" border stripe size="medium" style="width: 400px; line-height: 23px;" class="hui-mb-1">
            <el-table-column label="门店ID" prop="id"></el-table-column>
            <el-table-column label="门店名称" prop="label"></el-table-column>
          </el-table>
          <el-button @click="handleDialogBranch" type="primary" size="small" icon="el-icon-location" plain>设置活动门店</el-button>
        </el-form-item>
      </h-box>
      <h-box>
        <el-form-item label="" slot="footer" class="hui-mb-0">
          <el-button @click="handleSubmit('eventForm')" :loading="loading" type="primary">{{ type === 'edit' ? '保存' : '创建' }}</el-button>
          <el-button @click="handleBack">返回</el-button>
        </el-form-item>
      </h-box>
    </el-form>

    <hpro-dialog-branch v-model="dialogVisibleBranch" :selected="eventForm.canEventBranch" @change="onChangeDialogBranch" @close="onVisibleDialogBranch" @open="onVisibleDialogBranch"></hpro-dialog-branch>
  </div>
</template>

<script>
export default {
  data () {
    return {
      type: '',
      loading: false,
      dialogVisibleBranch: false,
      weeklyRoles: [
        {
          label: 0,
          name: ''
        }
      ],
      dailyRoles: [
        {
          key: 0,
          label: ''
        }
      ],
      eventForm: {
        title: '',
        userTags: [],
        _dateRange: [],
        startTime: '',
        endTime: '',
        eventAllWeekly: true,
        canEventWeekly: [],
        eventAllDaily: true,
        canEventDaily: [],
        discount: undefined,
        eventAllUser: true,
        canEventUser: [],
        eventAllBranch: true,
        canEventBranch: []
      },
      eventFormRoles: {
        title: [
          {
            required: true,
            message: '请输入活动标题',
            trigger: 'blur, change'
          },
          {
            max: 16,
            message: '活动标题最多 16 个字',
            trigger: 'blur, change'
          }
        ],
        userTags: [
          {
            type: 'array',
            max: 5,
            message: '可选标签不超过 5 个',
            trigger: 'blur, change'
          }
        ],
        _dateRange: [
          {
            required: true,
            type: 'array',
            message: '活动时间必填',
            trigger: 'blur, change'
          }
        ],
        eventAllWeekly: [
          {
            required: true,
            type: 'boolean',
            message: '生效日期限制必选',
            trigger: 'change'
          }
        ],
        canEventWeekly: [
          {
            required: true,
            type: 'array',
            message: '生效日期必选',
            trigger: 'blur, change'
          }
        ],
        eventAllDaily: [
          {
            required: true,
            type: 'boolean',
            message: '生效时段限制必选',
            trigger: 'change'
          }
        ],
        canEventDaily: [
          {
            required: true,
            type: 'array',
            message: '生效时段必选',
            trigger: 'blur, change'
          }
        ],
        discount: [
          {
            required: true,
            type: 'number',
            min: 10,
            max: 99,
            message: '折扣力度必填, 范围 10 - 99 之间',
            trigger: 'blur, change'
          }
        ],
        eventAllUser: [
          {
            required: true,
            type: 'boolean',
            message: '参加用户限制必选',
            trigger: 'change'
          }
        ],
        canEventUser: [
          {
            required: true,
            type: 'array',
            message: '请至少选择 1 个可参与活动的会员卡',
            trigger: 'change'
          }
        ],
        eventAllBranch: [
          {
            required: true,
            type: 'boolean',
            message: '参加用户限制必选',
            trigger: 'change'
          }
        ],
        canEventBranch: [
          {
            required: true,
            type: 'array',
            message: '请至少选择 1 个可参与活动的会员卡',
            trigger: 'change'
          }
        ]
      },
      pickerOptions: {
        disabledDate (time) {
          const today = new Date()
          const end = new Date()
          return (
            time.getTime() < end.setTime(today.getTime() - 3600 * 1000 * 24)
          )
        }
      }
    }
  },
  created () {
    this.setType()
    this.setWeeklyRoles()
    this.setDailyRoles()
  },
  methods: {
    // 根据url判断类型
    setType () {
      let type = this.$route.query.type
      this.type = type
      if (type === 'edit') {
        this.initMockData()
      }
    },

    // 模拟数据
    initMockData () {
      let eventForm = this.eventForm
      let tmp = {
        title: '工作日午市8折',
        userTags: [
          {
            id: '6',
            label: '标签名称6'
          },
          {
            id: '7',
            label: '标签名称7'
          }
        ],
        _dateRange: [],
        startTime: 1519257600,
        endTime: 1524412799,
        eventAllWeekly: false,
        canEventWeekly: [1, 2, 3, 4, 5],
        eventAllDaily: false,
        canEventDaily: [11, 12, 13],
        discount: 80,
        eventAllUser: false,
        canEventUser: [
          {
            cardId: '1',
            cardName: '会员卡1'
          }
        ],
        eventAllBranch: true,
        canEventBranch: []
      }
      tmp._dateRange.unshift(tmp.startTime * 1000)
      tmp._dateRange.push(tmp.endTime * 1000)
      eventForm = tmp
      this.eventForm = eventForm
    },

    // 设置可选的星期
    setWeeklyRoles () {
      let weeklyRoles = []
      let tmp = [
        {
          label: 1,
          name: '周一'
        },
        {
          label: 2,
          name: '周二'
        },
        {
          label: 3,
          name: '周三'
        },
        {
          label: 4,
          name: '周四'
        },
        {
          label: 5,
          name: '周五'
        },
        {
          label: 6,
          name: '周六'
        },
        {
          label: 7,
          name: '周日'
        }
      ]
      tmp.map(element => {
        weeklyRoles.push(element)
      })
      this.weeklyRoles = weeklyRoles
    },

    // 设置每日时段
    setDailyRoles () {
      let dailyRoles = []
      let tmp = [
        {
          key: 0,
          label: '0点 - 1点'
        },
        {
          key: 1,
          label: '1点 - 2点'
        },
        {
          key: 2,
          label: '2点 - 3点'
        },
        {
          key: 3,
          label: '3点 - 4点'
        },
        {
          key: 4,
          label: '4点 - 5点'
        },
        {
          key: 5,
          label: '5点 - 6点'
        },
        {
          key: 6,
          label: '6点 - 7点'
        },
        {
          key: 7,
          label: '7点 - 8点'
        },
        {
          key: 8,
          label: '8点 - 9点'
        },
        {
          key: 9,
          label: '9点 - 10点'
        },
        {
          key: 10,
          label: '10点 - 11点'
        },
        {
          key: 11,
          label: '11点 - 12点'
        },
        {
          key: 12,
          label: '12点 - 13点'
        },
        {
          key: 13,
          label: '13点 - 14点'
        },
        {
          key: 14,
          label: '14点 - 15点'
        },
        {
          key: 15,
          label: '15点 - 16点'
        },
        {
          key: 16,
          label: '16点 - 17点'
        },
        {
          key: 17,
          label: '17点 - 18点'
        },
        {
          key: 18,
          label: '18点 - 19点'
        },
        {
          key: 19,
          label: '19点 - 20点'
        },
        {
          key: 20,
          label: '20点 - 21点'
        },
        {
          key: 21,
          label: '21点 - 22点'
        },
        {
          key: 22,
          label: '22点 - 23点'
        },
        {
          key: 23,
          label: '23点 - 24点'
        }
      ]
      tmp.map(element => {
        dailyRoles.push(element)
      })
      this.dailyRoles = dailyRoles
    },

    // 获取标签组件数据变动事件
    onChangeUserTags (val) {
      this.eventForm.userTags = val
    },

    // 设置活动时间
    onChangeDateRange () {
      let _dateRange = this.eventForm._dateRange
      let startTime = _dateRange[0] / 1000
      let endTime = _dateRange[1] / 1000
      this.eventForm.startTime = startTime
      this.eventForm.endTime = endTime
    },

    // 设置可生效星期为空
    onChangeCanEventWeekly () {
      if (this.eventForm.eventAllWeekly) {
        this.eventForm.canEventWeekly = []
      }
    },

    // 给已选的星期排序
    onChangeWeeklySort () {
      let canEventWeekly = this.eventForm.canEventWeekly
      canEventWeekly.sort()
      this.eventForm.canEventWeekly = canEventWeekly
    },

    // 设置可生效时段为空
    onChangeCanEventDaily () {
      if (this.eventForm.eventAllDaily) {
        this.eventForm.canEventDaily = []
      }
    },

    // 给已选的时段排序
    onChangeDailySort () {
      let canEventDaily = this.eventForm.canEventDaily
      let sequence = function (a, b) {
        return a - b
      }
      canEventDaily.sort(sequence)
      this.eventForm.canEventDaily = canEventDaily
    },

    // 会员卡变更事件
    onUserChange (val) {
      this.eventForm.canEventUser = val
    },

    // 设置可参加用户为空
    onChangeCanEventUser () {
      if (this.eventForm.eventAllUser) {
        this.eventForm.canEventUser = []
      }
    },

    // 设置参加活动门店为空
    onChangeCanEventBranch () {
      if (this.eventForm.eventAllBranch) {
        this.eventForm.canEventBranch = []
      }
    },

    // 打开选择门店模态框
    handleDialogBranch () {
      this.dialogVisibleBranch = true
    },

    // 选择门店模态框打开关闭事件
    onVisibleDialogBranch (val) {
      this.dialogVisibleBranch = val
    },

    // 门店模态框已选择门店更新事件
    onChangeDialogBranch (val) {
      this.eventForm.canEventBranch = val.selected
    },

    // 返回
    handleBack () {
      this.$router.back()
    },

    // 表单校验
    handleSubmit (formName) {
      this.$formSubmit(formName).then(() => {
        console.log('表单校验成功，提交')
        this.$loading()
        this.loading = true
        setTimeout(() => {
          this.$message({
            message: '活动保存成功！',
            type: 'success'
          })
          this.handleBack()
          this.$loading().close()
        }, 1000)
      }).catch(() => {
        console.log('表单校验失败！')
        this.$message({
          message: '必要的活动信息没填写完整, 请检查!',
          type: 'warning'
        })
        this.loading = false
      })
    }
  }
}
</script>
